<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta content="text/html;charset=utf-8"></meta>
    <title>用户列表</title>
    <link rel="stylesheet" href="/static/js/common/bootstrap/css/bootstrap.min.css"></link>
    <link rel="stylesheet" href="/static/css/base.css"></link>
    <script src="/static/js/common/jquery/jquery-3.2.1.min.js"></script>
    <script src="/static/js/base/base.js"></script>
    <script>


        //删除记录
        function deleteRecord(data) {
            var id = $(data).parent().parent().children().first().text();
            // alert(id);
            $.ajax({
                type: "DELETE",
                url: "${basePath}" + "/user/" + id,
                dataType: "html",
                success: function(result){
                    // alert(111);
                    $("#userTable").load(location.href+" #userTable");
                    // $(data).parent().parent().remove();
                },
                error: function (result) {
                    alert("error:"+data.responseText);
                }

            });
        }


        //记录翻页
        function listRecord(data) {
            var userName = $("#queryUserName").text();
            var pageSize = "${listResult.pageSize}";
            var pageNo = $(data).text();
            var requestData = "?pageNo=" + pageNo + "&pageSize=" + pageSize;
            if(userName){
                requestData = requestData + "&userName=" + userName
            }
            // alert(requestData);
            $.ajax({
                type: "GET",
                url: "${basePath}" + "/user/pageList" + requestData,
                dataType: "html",
                success: function(result){
                    $("#userTable").html(result);

                },
                error: function (result) {
                    alert("error:"+result.responseText);
                }

            });
        }

        //角色查询
        function queryRole(data) {
            var pageSize = "${listResult.pageSize}";
            var pageNo = 1;
            var requestData = "?pageNo=" + pageNo + "&pageSize=" + pageSize;
            var userName = $("#userName").val();
            if(userName){
                requestData = requestData + "&userName=" + userName
            }
            // alert(requestData);
            $.ajax({
                type: "GET",
                url: "${basePath}" + "/user/pageList" + requestData,
                dataType: "html",
                success: function(result){
                    $("#userTable").html(result);
                },
                error: function (result) {
                    alert("error:"+result.responseText);
                }

            });
        }

        //修改记录
        function updateRecord(data) {
            var tdList = $(data).parent().parent().children();
            $("#myModalLabel").html("用户修改");
            $("#modalCancel").html("关闭");
            $("#addRole").html("保存");
            // $("#userModal").modal("show");
            $("#myModal").modal("show");
            $("#addRole").attr("onclick","");
            //设置id
            $("#userId").attr("value", tdList.eq(0).text());
            $("#username").attr("value", tdList.eq(1).text());
            $("#password").attr("value", tdList.eq(2).text());
            var isLocked = Number(tdList.eq(3).text());
            if(isLocked == 1){
                $("#locked").attr("locked", "locked");
                $("#notLocked").attr("locked", "");
            }else{
                $("#notLocked").attr("locked", "locked");
                $("#locked").attr("locked", "");
            }

            $("#addRole").click(function () {
                var url = "${basePath}" + "/user/";
                var type = "PUT";
                commitModal(url, type, data);
                $('#addRole').unbind("click");
            });
        }

        //新增记录
        function insertRecord(data) {
            $("#myModalLabel").html("新增用户");
            $("#modalCancel").html("取消");
            $("#addRole").html("提交");
            $("#myModal").modal("show");
            $("#addRole").attr("onclick","");

            var url = "${basePath}" + "/user/";
            var type = "POST";
            $("#addRole").click(function () {
                commitModal(url, type, data);
                $('#addRole').unbind("click");
            });
        }

        //模态窗提交
        function commitModal(url, type, data) {
            $.ajax({
                type: type,
                url: url,
                data: $('#form_addUser').serialize(),
                dataType: "html",
                success: function (resultData) {
                    // alert(1111);
                    $("#userTable").load(location.href+" #userTable");
                    $('#myModal').modal('hide');
                },
                //调用执行后调用的函数
                // complete: function(XMLHttpRequest, textStatus){
                //     alert(XMLHttpRequest.responseText);
                //     alert(textStatus);
                // },
                error: function(data) {
                    alert("error:"+data.responseText);
                }
            });
        }


    </script>
</head>
<body>
 <@_top.top 1/>
<div class="container" style="padding-bottom: 15px;min-height: 300px; padding-top: 60px;">
    <div class="row">
        <@_left.role 0/>
        <div id="userTable">
            <#include "user_table.ftl">
        </div>
    </div>
</div>

<#--<div id="userModal">-->
    <#--<#include "user_modal.ftl">-->
<#--</div>-->
<div class="modal fade" id="myModal" style="padding-top: 150px" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    新增用户
                </h4>
            </div>
            <div class="modal-body">
                <form id="form_addUser" class="form-horizontal" role="form">
                    <div class="form-group hidden">
                        <label for="firstname" class="col-sm-2 control-label">ID</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="userId" name="id" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="lastname" class="col-sm-2 control-label">密&nbsp;&nbsp;&nbsp;码</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="password" value="" name="password" placeholder="密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">是否可用</label>
                        <div class="radio col-sm-10">
                                <label>
                                    <input type="radio" name="isLocked" id="locked" value="1" checked > 是
                                </label>
                                <label>
                                    <input type="radio" name="isLocked" id="notLocked" value="0" >否
                                </label>

                        </div>
                    </div>
                </form>

            </div>

            <div class="modal-footer">

                <button type="button" id="modalCancel" onclick="function close() {
                            $('#myModal').modal('hide');
                        }" class="btn btn-default" data-dismiss="modal">取消
                </button>
                <button type="button" id="addRole" onclick="" class="btn btn-primary">
                    提交
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<script src="/static/js/common/bootstrap/js/bootstrap.min.js"></script>

</body>

</html>